<template>
  <div>
    <!-- <Input v-model="name" class="inputlenth">
        <Button slot="append" icon="ios-search" @click="searchName"></Button>
    </Input>
    <Button type="error" @click="removeMore" style="marginRight:10px">删除多条记录</Button>
    <Button type="primary" @click="mesAdd">添加新记录</Button> -->
    <Table class="tab" border 
    :columns="columns7" :data="filter.data6" :height="200" ></Table>

    <Page class="page" :total="filter.total" :page-size-opts="[5,10,20,40]" 
    show-elevator show-sizer show-total 
    @on-change="change" @on-page-size-change="changePage"></Page>


    <Form id="formValidate" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="评论" prop="commit">
            <vue-editor id="vueEditor" v-model="formValidate.commit" placeholder="commit here"></vue-editor>
        </FormItem>
        <FormItem label="昵称" prop="name">
            <Input v-model="formValidate.name" value="匿名"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>
    <Modal v-model="modal" :title="titleUpdata">
        <Form ref="form" :model="form" :rules="rule" :label-width="80">
            <FormItem label="评论" prop="commit">
                <vue-editor  id="editor2" v-model="form.commit" placeholder="commit here"></vue-editor>
            </FormItem>
            <FormItem label="昵称" prop="name">
                <Input v-model="form.name" value="匿名"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('form')">提交</Button>
                <Button type="ghost" @click="handleReset('form')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </Modal>
    
  </div>
</template>
<script>
import {eventButtons} from "../../main.js";
import { VueEditor } from 'vue2-editor';
  export default{
      data(){
          return {
              columns7: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title:"昵称",
                    key:'name',
                    align: 'center',
                },
                {
                    title: '评论内容',
                    key: 'commit',
                    align: 'center',
                    type: 'html',
                },
                {
                    title: '时间',
                    key: 'data',
                    align: 'center',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'warning',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.row)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
              ],
              formValidate: {
                  name: '',
                  commit:'',
                  _newsID:'',
              },
              ruleValidate: {
                  name: [],
                  commit: [
                      { required: true, message: '内容不能为空', trigger: 'blur' },
                  ],
              },
              form: {
                  name: '',
                  commit:'',
                  _newsID:'',
              },
              rule: {
                  name: [],
                  commit: [
                      { required: true, message: '内容不能为空', trigger: 'blur' },
                  ],
              },
              filter:{
                data6: [],
                limit: 10,
                page: 1,
                total: 0,
                title:"",
                cate:"",
                filename:"",
                _id:"",
              },
              modal:false,
              addFlag:false,
              titleUpdata:''
          }
      },
      methods:{
        getData(){
            this.$http.post("http://127.0.0.1:3000/commits/list",this.filter)
            .then(res=>{
                console.log(res.data.total);
                this.filter.total = res.data.total;
                this.filter.data6 = res.data.rows
            });
        },
        handleSubmit (name) {
            this.formValidate.newsID = this.filter._id;
            this.$refs[name].validate((valid) => {
                if(this.addFlag){
                    this.$http.post("http://127.0.0.1:3000/commits/data/"+this.form._id,this.form)
                        .then(res=>{
                            this.addFlag = false;
                            this.modal = false;
                            this.getData();
                            this.$Message.success('修改成功!');
                        });
                }else{
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.$http.post("http://127.0.0.1:3000/commits/data/",this.formValidate)
                                .then(res=>{
                                    this.getData();
                                    this.$Message.success('修改成功!');
                                    this.formValidate = this.$options.data().formValidate
                                });
                        }else{
                            this.$Message.error('表单验证失败!');
                        }
                    });
                }
            }) 
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        show(row){
            this.addFlag = true;
            this.modal = true;
            this.titleUpdata = "修改评论";
            Object.assign(this.form,row);   
        },
        remove(row){
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确定要删除该记录？</p>',
                onOk: () => {
                    console.log(row._id)
                    this.$http.delete("http://127.0.0.1:3000/commits/data/"+row._id)
                    .then(res=>{
                        this.getData();
                        this.$Message.info('删除成功');
                    })
                },
                onCancel: () => {
                    // this.$Message.info('点击了取消');
                }
            });
        },
        change: function (page) {
            this.filter.page = page;
            this.getData();
        },
        changePage(rows){
            this.filter.limit = rows;
            this.getData();
        },
      },
      components:{
        VueEditor
      },
      props:['comm'],
      created(){
          this.filter._id = this.$route.params.id;
          this.getData();

          eventButtons.$on("commitId",(comm)=>{
              this.comm = comm;
          });

      }
  }
</script>
<style scoped>
  #vueEditor{
      height: 200px;
  }
  #formValidate{
    margin: 20px 100px 10px 0;
  }
  #editor2{
    height: 200px;
  }
</style>

